<template>
  <article class="home">
    <!--show banner-->
    <section>
      <v-parallax :src="hero" height="600">
        <v-layout
          column
          align-center
          justify-center
          class="white--text">
          <v-avatar size="200px" tile>
            <img :src="vuetify" alt="vuetify">
          </v-avatar>
          <h1 class="white--text mb-2 display-2 text-xs-center" v-text="avatarName"></h1>
          <h1 class="white--text mb-3 display-2 text-xs-center" v-text="jobInfo"></h1>
          <h1 class="white--text mb-3 display-1 text-xs-center" v-text="bannerInfo"></h1>
          <!--<v-btn-->
          <!--class="blue lighten-2 mt-5"-->
          <!--dark-->
          <!--large-->
          <!--href="/pre-made-themes">-->
          <!--Get Started-->
          <!--</v-btn>-->
        </v-layout>
      </v-parallax>
    </section>

    <!--about me info-->
    <section>
      <v-layout
        column
        wrap
        class="my-5"
        align-center>
        <v-flex xs12 sm4 class="my-3">
          <div class="text-xs-center">
            <h2 class="headline">The best way to start developing</h2>
            <span class="subheading">
                Cras facilisis mi vitae nunc
              </span>
          </div>
        </v-flex>
        <v-flex xs12>
          <v-container grid-list-xl>
            <v-layout row wrap align-center>
              <v-flex xs12 md4>
                <v-card class="elevation-0 transparent">
                  <v-card-text class="text-xs-center">
                    <v-icon x-large class="blue--text text--lighten-2">color_lens</v-icon>
                  </v-card-text>
                  <v-card-title primary-title class="layout justify-center">
                    <div class="headline text-xs-center">Material Design</div>
                  </v-card-title>
                  <v-card-text>
                    Cras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare.
                    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                    Nullam in aliquet odio. Aliquam eu est vitae tellus bibendum tincidunt. Suspendisse potenti.
                  </v-card-text>
                </v-card>
              </v-flex>
              <v-flex xs12 md4>
                <v-card class="elevation-0 transparent">
                  <v-card-text class="text-xs-center">
                    <v-icon x-large class="blue--text text--lighten-2">flash_on</v-icon>
                  </v-card-text>
                  <v-card-title primary-title class="layout justify-center">
                    <div class="headline">Fast development</div>
                  </v-card-title>
                  <v-card-text>
                    Cras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare.
                    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                    Nullam in aliquet odio. Aliquam eu est vitae tellus bibendum tincidunt. Suspendisse potenti.
                  </v-card-text>
                </v-card>
              </v-flex>
              <v-flex xs12 md4>
                <v-card class="elevation-0 transparent">
                  <v-card-text class="text-xs-center">
                    <v-icon x-large class="blue--text text--lighten-2">build</v-icon>
                  </v-card-text>
                  <v-card-title primary-title class="layout justify-center">
                    <div class="headline text-xs-center">Completely Open Sourced</div>
                  </v-card-title>
                  <v-card-text>
                    Cras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare.
                    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                    Nullam in aliquet odio. Aliquam eu est vitae tellus bibendum tincidunt. Suspendisse potenti.
                  </v-card-text>
                </v-card>
              </v-flex>
            </v-layout>
          </v-container>
        </v-flex>
      </v-layout>
    </section>

    <!--show project-->
    <section>
      <v-parallax :src="section" height="380">
        <v-layout column align-center justify-center>
          <div class="headline white--text mb-3 text-xs-center">Web development has never been easier</div>
          <em>Kick-start your application today</em>
          <!--<v-btn-->
          <!--class="blue lighten-2 mt-5"-->
          <!--dark-->
          <!--large-->
          <!--href="/pre-made-themes"-->
          <!--&gt;-->
          <!--Get Started-->
          <!--</v-btn>-->
        </v-layout>
      </v-parallax>
    </section>

    <!--contact-->
    <section>
      <v-container grid-list-xl>
        <v-layout row wrap justify-center class="my-5">
          <v-flex xs12>
            <v-card class="elevation-0 transparent">
              <v-card-title primary-title class="layout justify-center">
                <div class="headline" v-text="contactTitle"></div>
              </v-card-title>
              <v-card-text v-text="contactAbout"></v-card-text>
              <v-list class="transparent">
                <v-list-tile v-for="(item,i) in contactInfo"
                             :key="i">
                  <v-list-tile-action>
                    <v-icon class="blue--text text--lighten-2" v-text="item.icon"></v-icon>
                  </v-list-tile-action>
                  <v-list-tile-content>
                    <v-list-tile-title v-text="item.value"></v-list-tile-title>
                  </v-list-tile-content>
                </v-list-tile>
              </v-list>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </section>
  </article>
</template>

<script lang="ts">
  import {Vue, Component} from 'vue-property-decorator'

  @Component
  export default class Home extends Vue {

    avatarName: string = "Fulong Lin";
    bannerInfo: string = "Welcome";
    jobInfo: string = "Full-stack web developer";

    contactTitle: string = "Contact me";
    contactAbout: string = "Cras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare.";
    contactInfo: { [p: string]: string }[] = [
      {
        label: "phone",
        value: "13509962416",
        icon: "phone"
      },
      {
        label: "email",
        value: "1126101262@qq.com",
        icon: "email"
      },
      {
        label: "addrs",
        value: "广州市越秀区先烈中路81号大院",
        icon: "place"
      }
    ];


    logo: string = require("@/assets/logo.png");
    vuetify: string = require("@/assets/vuetify.png");
    hero: string = require("@/assets/hero.jpeg");
    section: string = require("@/assets/section.jpg");
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  h3 {
    margin: 40px 0 0;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>
